<template>
    <div class="app">
        <el-form ref="form" label-width="80px" inline :model="form" >
  <el-form-item label="人员搜索:" prop="userName">
    <el-input  placeholder='请输入' v-model="form.userName"></el-input>
  </el-form-item>
  <el-form-item label="角色:" prop="roleName">
     <el-select  placeholder="请选择" v-model="isRepair" @change="changeSelect" clearable>
      <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
      <!-- <el-option  label="运营员" value="false"></el-option>
      <el-option  label="维修员" value="true"></el-option> -->
    </el-select>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submit"><i class="el-icon-search"></i>查询</el-button>
  </el-form-item>
  </el-form>
        <div class="bg">
          <el-table 
          :data = list
          style="width: 100%"
     >
    <el-table-column
      fixed
      type="index"
      label="序号"
      width="100">
    </el-table-column>
    <el-table-column
    prop="userName"
      label="人员名称"
      width="180">
    </el-table-column>
    <el-table-column
    prop="roleName"
      label="角色"
      width="180">
    </el-table-column>
    <el-table-column
    prop="mobile"
      label="联系电话"
      width="180">
    </el-table-column>
    <el-table-column
    prop="workCount"
      label="完成工单(本月)"
      width="200">
    </el-table-column>
    <el-table-column
    prop="progressTotal"
      label="进行中工单"
      width="200">
    </el-table-column>
    <el-table-column
    prop="cancelCount"
      label="拒绝工单(本月)"
      width="240">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="240">
      <template #default="{row}">
        <el-button type="text" @click="getDetail(row.userId)">查看详情</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="page">
        <div class="left">
          <span>共{{params.totalCount}}条记录</span>
          <span>第 {{params.pageIndex}}/{{params.totalPage}}页</span>
        </div>
        <div class="right">
          <el-button-group>
      <el-button type="primary" 
      @click=getWork(-1) :disabled='params.pageIndex<=1?true:false'>上一页</el-button>
      <el-button type="primary" @click=getWork(1)>下一页</el-button>
      </el-button-group>
        </div>
      </div>
     </div>
     <detail :visible.sync="visible" ref="detail" :data="data" :list1="list1"></detail>
    </div>
  </template>

<script>
import {getWork,getWorkDetails,getPeopleDetails} from "@/api/role"
import detail from "./components/detail.vue"
import moment from 'moment'
export default {
    name: 'yunweigongdan',
    components:{
      detail
    },
    data() {
        return {
          visible:false,
          isRepair:null,
          form:{
            userName:'',
            roleName:'',
            // roleId:'',
            isRepair:''
          },
            list:[],
            data:{},
            params:{
              pageIndex: 0,
              pageSize: 10,
              totalCount: 0,
              totalPage:0, 
            },
            options:[
            {
              value: 'false',
              label: '运营员'
             },
            {
             value: 'true',
             label: '维修员'
           },
            ],
            list1: [
              {
               date: '本周',
              //  workCount: '2',
              //  progressTotal: '3',
              // cancelCount: '3',
              // total: '3'
              }, 
              {
             date: '本月', 
            //   workCount: '2',
            //  progressTotal: '3',
            //   cancelCount: '3',
            //   total: '3'
             },
            {
            date: '本年', 
            // workCount: '2',
            // progressTotal: '3',
            // cancelCount: '3', 
            // total: '3'
             }
          ],
          week:{},
          month:{},
          year:{},
          startMont: '',
          endMont: '',
       };
    },

    mounted() {
        this.getWork(),
        this.week = this.getWeek()
        this.formatDate()
    },

    methods: {
        async getWork(num=0) {
          this.params.pageIndex=+this.params.pageIndex+num
          const res = await getWork(this.params)
          console.log(res);
          this.list = res.currentPageRecords
          this.params.pageIndex=res.pageIndex
          this.params.totalPage=res.totalPage
          this.params.totalCount = parseInt(res.totalCount)
          // this.roleNames = res.currentPageRecords
        },
       async submit() {
        const res=  await getWork(this.form)
        this.list = res.currentPageRecords
        },
       changeSelect() {
          if (this.isRepair === 'true') {
        this.form.isRepair = true
      } else if (this.isRepair === 'false') {
        this.form.isRepair = false
      }
        },
        async getDetail(id){
          // top 人员信息详情
         this.visible = true
        const res =  await getPeopleDetails(id)
        // console.log(res);
        this.data = res
        // this.week.userId = row.userId
        // this.month.userId = row.userId
        // this.year.userId = row.userId
        //  底部 周月年
        const res1 = await getWorkDetails({...this.week,userId:id})
        const res2 = await getWorkDetails({...this.month,userId:id})
        const res3 = await getWorkDetails({...this.year,userId:id})
           // 周 月 年
          this.list1[0].workCount = res1.workCount
          this.list1[0].progressTotal = res1.progressTotal
          this.list1[0].cancelCount = res1.cancelCount
          this.list1[0].total = res1.total

          this.list1[1].workCount = res2.workCount
          this.list1[1].progressTotal = res2.progressTotal
          this.list1[1].cancelCount = res2.cancelCount
          this.list1[1].total = res2.total

          this.list1[2].workCount = res3.workCount
          this.list1[2].progressTotal = res3.progressTotal
          this.list1[2].cancelCount = res3.cancelCount
          this.list1[2].total = res3.total
         
        },
        getWeek() {
      const time = {}
      // 本周第一天
      const startTime = new Date(
        new Date().getTime() - 3600 * 1000 * 24 * (new Date().getDay() - 1)
      )
      time.start = moment(startTime).format('YYYY-MM-DD') +" "+ '00:00:00'
      // 本周最后一天
      const endTime = new Date(
        new Date().getTime() + 3600 * 1000 * 24 * (7 - new Date().getDay())
      )
      time.end = moment(endTime).format('YYYY-MM-DD') +" "+ '23:59:59'
      return time
    },
    formatDate() {
      // 获取当前时间并打印
      const myDate = new Date()
      const yy = String(myDate.getFullYear())
      const mm = (myDate.getMonth() + 1)<10?"0"+(myDate.getMonth() + 1):(myDate.getMonth() + 1)
      const d = new Date(yy, mm, 0).getDate() // 获取当月最后一日
      this.month.start = yy + '-' + mm + '-' + '01' + ' 00:00:00'
      this.month.end = yy + '-' + mm + '-' + d + ' 23:59:59'
      this.year.start = yy + '-' + '01' + '-' + '01' + ' 00:00:00'
      this.year.end = yy + '-' + '12' + '-' + '31' + ' 23:59:59'
    },
      
    },
};
</script>

<style lang="scss" scoped>
 .page{
  height: 80px;
  line-height: 80px;
  background-color: #fff;
  display: flex;
  color:#dbdfe5;
  font-size: 20px;
  padding-left: 20px;
  .left{
    span{
      margin-left: 5px;
    }
  }
  .right{
    margin-left:900px;
   ::v-deep .el-button{
      margin-left: 10px;
      background-color: #d5ddf8;
      border: none;
      color:#606266
       }
  }
}
  
</style>
